<template>
  <div id="seachmv" >
    
    <div class="playermvlist" v-for="item in mvllist" :key="item.vid" @click="toplayvideo(item.vid,item.type)" >

      <el-skeleton animated :loading="loading">
          <template slot="template">
            <el-skeleton-item variant="image" style="width: 280px; height: 160px;" />
            <el-skeleton-item variant="text"/>
            <el-skeleton-item variant="text"  />
          </template>

           
          <template>
            <img :src="item.coverUrl" alt="">
            <span class="mvname " >{{item.title}}</span> <br>
            <span class="mvcreator">{{item.creator[0].userName}}</span>
          </template>

      </el-skeleton>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>

  </div>
</template>

<script>


import {getseach} from '../../../../network/songlist'

export default {
  name: 'SeachMV',
  data() {
    return {
      mvllist:[],
      namepath: '/SeachMusic/SeachMV',
      currentPage3:1,
      loading:false
    }
  },
  methods: {

    // @getseach 获取视频数据
    getseachapi() {
      getseach(1014,this.$route.query.offset,this.$route.query.keywords).then(res => {
        this.mvllist = res.data.result.videos
        //console.log(res.data);
      })
    },
    //跳转到视频详情页面
    toplayvideo(vid,type) {
      this.$router.push({
        path: '/PlayVideo',
        query:{
          vid:vid,
          type:type
        }
        })
    },
    //分页变动进行更新
    handleCurrentChange() {
      //骨架屏
      this.loading = true;
      //延迟1秒显示数据
      setTimeout(() => (this.loading = false), 1000)

      //重新query地址中的offset
      this.$router.push({
        path: this.$router.path,
        query: {
          type: 1014,
          offset:(this.currentPage3 - 1 ) * 30,
          keywords:this.$route.query.keywords
        }
      }).catch(err => err)
      console.log("MV下一页",(this.currentPage3 - 1 ) * 30);
      //let a = this.currentPage
      //进行页数offset跟新请求
      getseach(1014,(this.currentPage3 - 1 ) * 30 ,this.$route.query.keywords).then(res => {
        this.mvllist = res.data.result.videos
        //console.log(res.data);
      });
      //给父组件传达置顶信息
      this.$emit('set_scrolltop');
    }
  },
  activated() {
    //console.log(this.$route.query.keywords);
    if (this.mvllist == 0) {
      this.getseachapi()
    }
  },
  watch: {
    /*
    //监听到当前路由是否和dat中的路由值一样
    //true：1.触发api更新。 2.分页导航进行初始值为1
    */
    "$route.query.keywords"(val,oval) {
      //搜索框值变进行数据清空
      this.mvllist = 0;
      console.log(val,oval,"MV",this.$route.query.keywords,this.$route.path,this.namepath);
      if (this.$route.path == this.namepath) {
        console.log("MV触发了API");
        this.currentPage3 = 1
        this.getseachapi()
      }
    }
    //监听keywords来进行调用@getwachseach() 方法
    /* '$route.query.keywords': {
      //immediate:true,
      //deep:true,
      handler(val,oval) {
        console.log("MV被改变了");
        this.getseachapi()
      }
    } */
  },
}
</script>

<style>
#seachmv {
  display: flex;
  flex-wrap: wrap;
}
.playermvlist {
  width: 280px;
  height: 210px;
  margin:  0 0 2rem 1.5rem;
  /* overflow: hidden;
  text-overflow: ellipsis; */
}
.playermvlist img{
  width: 280px;
  height: 160px;
  border-radius: 8px;
}
.playermvlist img:hover {
  animation: pulse;
  animation-duration: 1s;

}
.mvname {
  display: inline-block;
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mvcreator {
  white-space: nowrap;
}
</style>